<template>
	<view>
		<ttBar leftIcon="icon-back" rightIcon="" title="重置密码"></ttBar>
		<view class="regBox hasTop">
			<text class="regTitle"></text>
			<view class="regRow">
				<text class="selectCy">+86</text>
				<text class="iconfont icon-unfold"></text>
				<input type="number" placeholder="请输入手机号码" v-model="tel" :disabled="isDis" maxlength="11" />
				<text :class="['sendBtn',isSendMsg?'isSend':'']" v-text="sendText" @tap="getMsgCode"></text>
			</view>
			<view class="regRow">
				<text class="labelName">验证码</text>
				<text class="iconfont"></text>
				<input type="number" placeholder="请输入短信验证码" v-model="msgCode" maxlength="6" />
			</view>
			<view class="regRow">
				<text class="labelName">新密码</text>
				<text class="iconfont"></text>
				<input type="text" password="true" placeholder="6-16位字母、字符含数字" v-model="userPass" maxlength="16" />
			</view>
			
			<view class="registerBtnBox">
				<button class="registerBtn" @tap="findPass">确认</button>
			</view>
		</view>

	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		data() {
			return {
				tel: '',
				msgCode: '',
				userPass: '',
				isGetMsg: false,
				sendText: '获取验证码',
				isSendMsg: false,
				isDis:false
			};
		},
		methods:{
			getMsgCode() {
				if (!this.isSendMsg) {
					let rgx = /^1[3456789]\d{9}$/;
					if (!this.tel) {
						uni.showToast({
							title: '请输入手机号码',
							icon: 'none'
						});
					} else if (!rgx.test(this.tel)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
					} else {
						this.$store.dispatch("sendMsgCode",{
							phone:this.tel,
							type:'103'
						}).then((res)=>{
							if(res.data.code==1){
								this.isGetMsg = true; //修改状态
								let t = 60;
								this.sendText = t + "秒"
								this.isSendMsg = true;
								const itval = setInterval(() => {
									t--;
									if (t < 1) {
										t = 60;
										this.sendText = "获取验证码"
										this.isSendMsg = false;
										clearInterval(itval);
									} else {
										this.isSendMsg = true;
										this.sendText = t + "秒"
									}
								}, 1000)
							}
							
						})
					}
				}else{
					uni.showToast({
						title: '发送的间隔太短啦，请稍后再试',
						icon: 'none'
					});
				}
			
			},
			findPass(){
				let rgx = /^1[3456789]\d{9}$/;
				if (!this.tel) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!rgx.test(this.tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				} else if (!this.isGetMsg) {
					uni.showToast({
						title: '请先获取短信验证码',
						icon: 'none'
					});
				} else if (!this.msgCode) {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					});
				} else if(!this.checkPassWord()){
					
				}else{
					this.$store.dispatch("setNewPass",{
						username:this.tel,
						password:this.userPass,
						code:this.msgCode
					})
					
				}
			},
			checkPassWord(){
				let psReg=/^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/;
				this.userPass=this.userPass.tailCut();
				if(!this.userPass){
					uni.showToast({
						title: '新密码不能为空',
						icon: 'none'
					});
					return false;
				}else if(this.userPass.length<6){
					uni.showToast({
						title: '密码太短',
						icon: 'none'
					});
					return false;
				}else if(psReg.test(this.userPass)){
					uni.showToast({
						title: '密码太过简单，请至少包含字母、数字、符号中的两种',
						icon: 'none'
					});
					return false
				}else {
					return true;
				}
				
			},
	
		},
		onLoad() {
			if(this.userInfo.username){		//已登录用户带出手机号并设为只读
				this.isDis=true;
				this.tel=this.userInfo.username
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	.regBox {
		display: flex;
		flex-direction: column;
		padding-left: 40upx;
		padding-right: 40upx;

		.regTitle {
			margin-top: 67upx;
			font-size: 52rpx;
			font-weight: bold;
			color: #202932;
			padding-left: 10upx;
			margin-bottom: 72upx;
			display:inline-block;
			height: 70upx;
			
		}

		.regRow {
			display: flex;
			border-bottom: 1px solid #e7e7e7;
			padding-bottom: 30upx;
			padding-top: 58upx;
			align-items: center;

			.selectCy {
				font-size: 42rpx;
				font-weight: bold;
				color: #565866;
				width: 90upx;
				flex-shrink: 0;
			}

			.iconfont {
				width: 26upx;
				font-size: 26upx;
				margin-right: 30upx;
			}

			>input {
				font-size: 35rpx;
				flex-shrink: 1;
				flex-grow: 1;
			}

			.sendBtn {
				font-size: 28rpx;
				color: #ff7d27;
				flex-shrink: 0;
				text-align: right;
			}
			.isSend {
				color: #565866;
			}

			.labelName {
				font-size: 36rpx;
				font-weight: bold;
				color: #565866;
				width: 110upx;
				flex-shrink: 0;
			}
		}
		.zcBox{
			margin-top: 60upx;
			font-size: 26rpx;
			color: #777777;
			display: flex;
			align-items: center;
			.cl{
				color: #f8a008;
			}
		}
		.registerBtnBox{
			padding: 0 60upx;
			margin-top: 200upx;
			.registerBtn{
				width: 100%;
				height: 88upx;
				border-radius: 44upx;
				background-color: #ffb423;
				color: #FFFFFF;
				font-size: 34upx;
			}
			.registerBtn:after{
				border: none;
			}
		}
	}
</style>
